<template>
	<view class="member">
		<view class="member-info">
			<view class="member-info-left">
				<image :src="mytask.avatar || '/static/buytao/index-right.png'" mode="widthFix" lazy-load></image>
			</view>
			<view class="member-info-middle">
				<view>{{mytask.nickname}}</view>
				<view>{{mytask.level_name}}</view>
			</view>
			<view class="member-info-right">
				<view>专属运营导师</view>
				<view>马上联系></view>
			</view>
		</view>
		
		<view class="member-quanyi">
			<view class="member-quayi-item">
				<view class="member-quanyi-title">
					<text class="member-quanyi-title-quan"></text>
					<text class="member-quanyi-title-quan"></text>
					<text class="member-quanyi-title-miaosu">升级 {{mytask.down_level.name}} 权限</text>
					<text class="member-quanyi-title-quan"></text>
					<text class="member-quanyi-title-quan"></text>
				</view>
				<view class="member-items">
					<view class="member-items-list" v-for="(items,index) in datalist.level" :key="index">
						<view>
							<image :src="items.icon?items.icon:'../../static/buytao/icon.png'"></image>
						</view>
						<view>{{items.title}}</view>
						<view>{{items.short_title}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="member-task">
			<view class="member-top-title">
				<text>完成以下任务即可升级{{mytask.down_level.name}}</text>
				<text>?</text>
			</view>
			<view class="member-top-items">
				<view class="member-top-left">
					<view>预估收益{{mytask.down_level.enable_money_count}}元</view>
					<view>
						<view class="member-top-percent">
							<view :style="{width:task_percent.money_percent}"></view>
						</view>
						<view>
							<text class="percent-title">{{mytask.commisson_money}}</text>/{{mytask.down_level.enable_money_count}}
						</view>
					</view>
				</view>
				<view class="member-top-right">
					<text>去分享</text>
				</view>
			</view>
		</view>
		
		<view class="member-task">
			<view class="member-top-items">
				<view class="member-top-left">
					<view>有效粉丝{{mytask.down_level.direct_users_count}}人</view>
					<view>
						<view class="member-top-percent">
							<view :style="{width:task_percent.user_percent}"></view>
						</view>
						<view>
							<text class="percent-title">{{mytask.direct_user}}</text>/{{mytask.down_level.direct_users_count}}
						</view>
					</view>
				</view>
				<view class="member-top-right">
					<text>去分享</text>
				</view>
			</view>
		</view>
		
		
		
		<!--活动广告-->
		<view class="scroll-view">
			<view class="platform-view-section" v-for="(items,index) in datalist.ad_menu.ad">
				<view class="platform-ad" v-for="(items_list,index_list) in items.list" @click="">
					<image :src="items_list.path" mode="widthFix" lazy-load></image>
				</view>
			</view>
		</view>
		
		
		
		<view class="member-ziliao">
			<view class="member-ziliao-items" v-for="(items,index) in datalist.ad_menu.menu" :key="index">
				<view class="member-ziliao-items-left">
					<image :src="items.path?items.path:'../../static/buytao/icon.png'"></image>
				</view>
				<view class="member-ziliao-items-middle">
					<view>{{items.name}}</view>
					<view>{{items.route.title}}</view>
				</view>
				<view class="member-ziliao-items-right">
					<text>去完善</text>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import tools from "../../common/tools"
	import apimember from '../../common/api/member'
	export default {
		data() {
			return {
				datalist:{
					level:[],
					ad_menu:{
						menu:[],
						ad:[],
					},
				},
				mytask:{
					down_level:{}
				},
				task_percent:{
					user_percent:'',
					money_percent:'',
				},
			}
		},
		onShow(){
			tools.is_has_login('hasLogin')
			this.list()
			this.task()	
		},
		onLoad() {
			
		},
		methods: {
			//请求接口
			list(){
				apimember.list({}).then(res =>{
					this.datalist.level=res.data.level;
					this.datalist.ad_menu.menu=res.data.ad_menu.menu;
					this.datalist.ad_menu.ad=res.data.ad_menu.ad;
				}).catch(cateres =>{
					
				});
			},
			
			//运营商权限
			task(){
				apimember.task({}).then(res =>{
					this.mytask=res.data
					console.log(this.mytask)
					this.task_percent.user_percent=this.mytask.down_level.direct_users_percent
					this.task_percent.money_percent=this.mytask.down_level.enable_money_percent
					console.log(this.task_percent)
				}).catch(cateres =>{
					
				});
			}
		},
		components:{
			apimember,
		},
	}
</script>

<style scoped>
	.scroll-view{
		width: 96%;
		margin: 2% auto;
		background: #FFFFFF;
		position: relative;
		top: -72px;
	}
	.platform-view-section{
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
		flex-wrap:wrap;
	}
	.platform-ad{
		flex:1;
		padding:20upx;
	}
	.platform-ad>image{
		width:100%;
	}
	
	
	.member{
		width:100%;
		background:#F5F5F5;
	}
	.member-info{
		width:96%;
		padding:80upx 2% 200upx 2%;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
		flex-wrap:wrap;
		background:linear-gradient(to right,#1f1800,#382400);
		border-bottom-left-radius: 100upx;
		border-bottom-right-radius: 100upx;
	}
	.member-info .member-info-left{
		width:15%;
		padding-right:3%;
	}
	.member-info .member-info-left>image{
		width:100%;
		height:100upx;
		border-radius:50upx;
	}
	.member-info .member-info-middle{
		width:50%;
	}
	.member-info-middle>view{
		color:#FFFFFF;
	}
	.member-info-middle>view:first-child{
		font-weight:bold;
		font-size:35upx;
	}	
	.member-info .member-info-right{
		padding-top:50upx;
		width:30%;
		color:#fff;
	}
	.member-info-right>view:first-child{
		font-weight:bold;
	}
	.member-quanyi{
		width:100%;
	}
	.member-quayi-item{
		width:96%;
		margin:2%;
		background-color:#FFFFFF;
		position:relative;
		top:-150upx;
		padding:50upx 0;
		border-radius:20upx;
	}
	.member-quanyi-title{
		width:100%;
		text-align:center;
	}
	.member-quanyi-title-quan{
		width:15upx;
		height:15upx;
		display:inline-block;
		background-color:#FF9619;
		margin-left:10upx;
		transform: rotate(45deg);
	}
	.member-quanyi-title-miaosu{
		padding:0 20upx;
		font-size:40upx;
		font-weight:bold;
	}
	.member-items{
		width:100%;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
		flex-wrap:wrap;
	}
	.member-items-list{
		width: 33%;
		padding:20upx 0;
	}
	.member-items-list>view{
		width:100%;
		margin:0 auto;
		text-align: center;
		font-size:25upx;
		white-space:normal;
	}
	.member-items-list>view>image{
		border-radius: 50upx;
	}
	.member-items-list>view:nth-child(2){
		font-weight:bold;
	}
	.member-items-list>view:last-child{
		color:#C8C7CC;
	}
	.member-items-list>view>image{
		width:45%;
		height:100upx;
	}
	.member-task{
		width:96%;
		margin:0 2%;
		background: #FFFFFF;
		padding:30upx 0;
		position:relative;
		top:-150upx;
	}
	.member-top-title{
		width:100%;
	}
	.member-top-title>text:first-child{
		padding-left:20upx;
		font-weight:bold;
		font-size:35upx;
	}
	.member-top-title>text:last-child{
		display:inline-block;
		width:40upx;
		height:40upx;
		border:1px solid #CCCCCC;
		border-radius:20upx;
		line-height:40upx;
		text-align:center;
		font-weight: bold;
		margin-left:20%;
	}
	.member-top-items{
		width:96%;
		margin:0 2%;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
		flex-wrap:wrap;
		padding-top:30upx;
	}
	.member-top-left{
		width:70%;
	}
	.member-top-left>view:first-child{
		font-weight:bold;
		font-size:35upx;
	}
	.member-top-left>view:last-child{
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
		flex-wrap:wrap;
	}
	.member-top-percent{
		width:70%;
		height:10upx;
		line-height:40upx;
		margin-top:20upx;
		background-color:#CCCCCC;
	}
	.member-top-left>view:last-child>view:last-child{
		width:30%;
	}
	.member-top-left>view:last-child>view:last-child>text{
		margin-left:10upx;
	}
	.percent-title{
		color:#F76260;
	}
	
	.member-top-percent>view{
		height:10upx;
		background-color: #F76260;
	}
	.member-top-right{
		width:30%;
		text-align:right;
		padding-top:30upx;
	}
	.member-top-right>text{
		padding:10upx 30upx;
		background: #FF3333;
		border-radius:15upx;
		color:#FFFFFF;
	}
	.member-ziliao{
		width:96%;
		margin:2% auto;
		background:#FFFFFF;
		position:relative;
		top:-150upx;
	}
	.member-ziliao-items{
		width:98%;
		padding:20upx 0;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
		flex-wrap:wrap;
	}
	.member-ziliao-items-left{
		width:20%;
	}
	.member-ziliao-items-left>image{
		width:80%;
		height:110upx;
	}
	.member-ziliao-items-middle{
		width:60%;
	}
	.member-ziliao-items-middle>view:first-child{
		font-size:30upx;
		font-weight: bold;
	}
	.member-ziliao-items-right{
		width:20%;
		padding-top:30upx;
	}
	.member-ziliao-items-right>text{
		color:#FFFFFF;
		padding:10upx 30upx;
		background: #FF3333;
		border-radius:15upx;
	}
</style>
